<template>
  <view class="page container">
    <!-- 审核通过显示切换按钮 -->
    <u-sticky v-if="
      userInfo.yan_shop &&
      userInfo.yan_shop.id &&
      userInfo.yan_shop.status == 1
    ">
      <view class="bgc-fff" style="padding: 16rpx 32rpx">
        <view class="tabs">
          <view class="tab" :class="{ 'tab-active': activeTab === '1' }" @click="activeTab = '1'">入驻资料</view>
          <view class="tab" :class="{ 'tab-active': activeTab === '2' }" @click="activeTab = '2'">协会管理员</view>
        </view>
      </view>
    </u-sticky>
    <view class="bgc-fff" style="margin-top: 32rpx" v-if="activeTab === '1'">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx" errorType="toast">
        <u-form-item label="门店名称：" prop="title" borderBottom>
          <u-input readonly v-model="formData.title" border="none" inputAlign="right" placeholder="请输入门店名称"></u-input>
        </u-form-item>
        <u-form-item label="门店联系人：" prop="contact_name" borderBottom>
          <u-input readonly v-model="formData.contact_name" border="none" inputAlign="right" placeholder="请输入联系人姓名"
            fontSize="28rpx"></u-input>
        </u-form-item>
        <u-form-item label="联系方式：" prop="contact_phone" borderBottom>
          <u-input readonly v-model="formData.contact_phone" border="none" inputAlign="right" placeholder="请输入手机号"
            fontSize="28rpx"></u-input>
        </u-form-item>
        <u-form-item label="所属社区：" prop="region_name" borderBottom>
          <u-input readonly v-model="formData.region_name" border="none" inputAlign="right" placeholder="请选择所属社区"
            fontSize="28rpx">
            <template slot="suffix">
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="门店位置：" prop="map_address" borderBottom>
          <u-input readonly v-model="formData.map_address" border="none" inputAlign="right" placeholder="请选择门店位置"
            fontSize="28rpx">
            <template slot="suffix">
              <image class="w-25 h-32" src="/static/svg/local.svg"></image>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="map_street" borderBottom>
          <view class="pl-28">
            <u-input readonly v-model="formData.map_street" border="none" placeholder="请输入详细地址如门牌号等"
              fontSize="28rpx"></u-input>
          </view>
        </u-form-item>
        <u-form-item label="营业执照：" prop="license" labelPosition="top">
          <view class="pl-28 mt-16 flex-row-between">
            <image class="w-284 h-204 br-12" :src="formData.license || '/pages2/static/upload-img.png'">
            </image>
            <!-- 详情时展示，审核状态 -->
            <view style="margin-top: -55rpx" v-if="userInfo.yan_shop.id">
              <image class="w-140 h-140" :src="getStatusImg"></image>
            </view>
          </view>
        </u-form-item>
        <!-- <u-form-item label="法人身份证（正反面）：" prop="front_image" labelPosition="top" labelWidth="400rpx">
          <view class="pl-28 mt-16 flex-column-center">
            <block>
              <image class="w-284 h-204 br-12" :src="formData.front_image || '/pages2/static/upload-card1.png'"></image>
            </block>
            <view class="w-28"></view>
            <block>
              <image class="w-284 h-204 br-12" :src="formData.back_image || '/pages2/static/upload-card2.png'"></image>
            </block>
          </view>
        </u-form-item> -->
        <u-form-item label="门头照片：(至多一张)" prop="logo" labelPosition="top" labelWidth="400rpx">
          <view class="pl-28 mt-16">
            <image class="w-284 h-204 br-12" :src="formData.logo || '/pages2/static/upload-img.png'"></image>
          </view>
        </u-form-item>
        <u-form-item label="门店形象展示：(5张以内)" labelPosition="top" labelWidth="400rpx" borderBottom>
          <view class="pl-28 mt-16">
            <u-upload disabled :file-list="formData.images" :maxCount="5" multiple width="284rpx" height="204rpx"
              :previewFullImage="true">
              <image class="w-284 h-204 br-12" src="/pages2/static/upload-img.png"></image>
            </u-upload>
          </view>
        </u-form-item>
        <u-form-item label="店铺简介：" prop="content" labelPosition="top">
          <view class="pl-28 mt-16">
            <view class="bgc-f7f8fa">
              <u-textarea disabled v-model="formData.content" border="none" height="268rpx"
                placeholder="请输入店铺简介"></u-textarea>
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view v-if="activeTab === '2'">
      <view class="bgc-fff pad-28 ml-28 mr-28 br-12" style="margin-top: 32rpx" v-for="item in communityShopManageList"
        :key="item.id">
        <view class="flex-column-center fs-28 mb-20">
          <text class="c-677585">姓　　名：</text>
          <text>{{ item.truename }}</text>
        </view>
        <view class="flex-column-center fs-28 mb-20">
          <text class="c-677585">联系方式：</text>
          <text>{{ item.phone }}</text>
        </view>
        <view class="flex" style="justify-content: flex-end">
          <view class="w-124 h-56 fs-28 c-c5261d br-12 flex-center-center btn-active" style="border: 1px solid #c5261d"
            @click="$utils.onCall(item.phone)">
            联系TA
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box pl-32 pr-32" v-if="
      (!userInfo.yan_shop.id || userInfo.yan_shop.status !== 0) &&
      activeTab === '1'
    ">
      <!-- 审核通过显示修改按钮 -->
      <view class="flex-between-center" style="width: 100%">
        <!-- 审核驳回显示驳回原因按钮 -->
        <u-button v-if="userInfo.yan_shop.status == 2" :customStyle="{
          backgroundColor: '#fff',
          color: '#677585',
          borderRadius: '10rpx',
          height: '88rpx',
          fontSize: '32rpx',
          border: '1px solid #677585',
          marginRight: '30rpx',
        }" @click="showReject">驳回原因</u-button>
        <u-button @click="$utils.redirectTo('/pages2/my/apply_enter_member')" :customStyle="{
          backgroundColor: '#C5261D',
          color: '#fff',
          borderRadius: '10rpx',
          height: '88rpx',
          fontSize: '32rpx',
          border: 'none',
        }">修改资料</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
  applyEnterYanShopApi,
  applyEnterYanShopDetailApi,
  communityShopManageListApi,
} from "@/services/my";
export default {
  data() {
    return {
      activeTab: "1",
      isEdit: false,
      formData: {},
      communityShopManageList: [],
    };
  },
  onLoad(options) {
    const { toast } = options;
    if (toast && toast == 1) {
      this.$u.toast("提交成功");
    }
    this.getUserInfo().then(() => {
      const { yan_shop } = this.userInfo;
      if (yan_shop.id) {
        this.getApplyEnterYanShopDetail();
        //请求协会管理员列表
        this.getCommunityShopManageList();
      }
    });
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    getStatusImg() {
      switch (+this.userInfo?.yan_shop?.status) {
        case 0:
          return "/pages2/static/shenhezhong.png";
        case 1:
          return "/pages2/static/shenhetongguo.png";
        case 2:
          return "/pages2/static/shenhejujue.png";
        default:
          return "";
      }
    },
  },
  methods: {
    ...mapActions({
      getUserInfo: "user/getUserInfo",
    }),
    //请求协会管理员列表
    getCommunityShopManageList() {
      communityShopManageListApi({
        shop_id: this.userInfo.yan_shop.id,
      }).then((res) => {
        this.communityShopManageList = res.data?.data || [];
      });
    },
    showReject() {
      uni.showModal({
        title: "驳回原因",
        content: this.formData.audit_remark || "暂无驳回原因",
        showCancel: false,
        confirmColor: "#C5261D",
      });
    },
    resetForm() {
      this.formData = this.$options.data().formData;
    },
    getApplyEnterYanShopDetail() {
      applyEnterYanShopDetailApi().then((res) => {
        if (res && res.data) {
          const data = res.data?.shop_info;
          // 处理图片数组
          let images = [];
          if (data.images) {
            const imageUrls = data.images.split(",");
            images = imageUrls.map((url) => ({
              fullurl: url,
              urls: url,
            }));
          }

          this.formData = {
            ...data,
            images,
          };
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 188rpx;
  background-color: #f7f8fa;

  /deep/.u-form-item__body {
    padding-top: 28rpx;
    padding-bottom: 28rpx;
  }

  /deep/.u-form-item__body__left {
    padding-left: 28rpx;
  }

  /deep/.u-form-item__body__left__content__label {
    font-size: 28rpx !important;
  }

  /deep/.u-form-item__body__right {
    padding-right: 28rpx;
  }

  /deep/.u-textarea {
    background-color: transparent;
  }

  .bottom-box {
    padding-top: 16rpx;
    box-sizing: border-box;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    height: 168rpx;
    background-color: #fff;
    box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
  }

  .tabs {
    width: 686rpx;
    height: 68rpx;
    border-radius: 12rpx;
    background: #f7f8fa;
    display: flex;
    justify-content: space-between;

    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 500;

      &-active {
        border-radius: 12rpx;
        background: $theme-color;
        color: #fff;
      }
    }
  }
}
</style>